<template>
	<view class="content">

		<lotus-address v-on:choseVal="choseValue" :lotusAddressData="addressData"></lotus-address>


		<view class="row b-b">
			<text class="tit">收货人：</text>
			<input class="input" type="text" v-model="addressData.name" placeholder="收货人姓名" placeholder-class="placeholder" />
		</view>
		<view class="row b-b">
			<text class="tit">手机号：</text>
			<input class="input" type="number" v-model="addressData.mobile" placeholder="收货人手机号码" placeholder-class="placeholder" />
		</view>
		<view class="row b-b" @click="openPicker">
			<text class="tit">所在地区：</text>
			<text class="input">
				{{addressData.provinceName + addressData.cityName + addressData.townName}}
			</text>
			<text class="yticon icon-shouhuodizhi"></text>
		</view>


		<view class="row b-b">
			<text class="tit">详细地址：</text>
			<input class="input" type="text" v-model="addressData.area" placeholder="楼号、门牌" placeholder-class="placeholder" />
		</view>

		<view class="row default-row">
			<text class="tit">设为默认</text>
			<switch :checked="addressData.defaule" color="#fa436a" @change="switchChange" />
		</view>
		<button class="add-btn" @click="confirm">提交</button>
		<button v-if="manageType == 'edit'" class="add-btn" @click="delect">删除</button>
	</view>
</template>

<script>
	import lotusAddress from "../../components/Winglau14-lotusAddress/Winglau14-lotusAddress.vue";
	import {
		mapState,
	} from 'vuex';
	export default {
		data() {
			return {
				addressData: {
					AddId: '',
					name: '',
					mobile: '',
					addressName: '',
					address: '',
					area: '',
					defaule: false,
					visible: false,
					provinceName: '',
					cityName: '',
					townName: '',
				},
				manageType: 'add',

				region: ''
			}
		},
		computed: {
			...mapState(['token', 'exp_time', 'hasLogin', 'userInfo'])
		},
		components: {
			"lotus-address": lotusAddress
		},
		onLoad(option) {
			let title = '新增收货地址';
			if (option.type === 'edit') {
				title = '编辑收货地址'
				let addres = JSON.parse(option.data)

				this.addressData.mobile = addres.Mobile
				this.addressData.name = addres.Name
				this.addressData.provinceName = addres.Province
				this.addressData.cityName = addres.City
				this.addressData.District = addres.District
				this.addressData.area = addres.Address
				this.addressData.defaule = addres.DefaultAdd
				this.addressData.townName = addres.District;
				this.addressData.AddId = addres.AddId


			}

			this.manageType = option.type;


			uni.setNavigationBarTitle({
				title
			})


		},
		methods: {
			openPicker() {
				this.addressData.visible = true;
			},
			choseValue(res) {
				//res数据源包括已选省市区与省市区code

				this.addressData.visible = res.visible; //visible为显示与关闭组件标识true显示false隐藏
				//res.isChose = 1省市区已选 res.isChose = 0;未选
				if (res.isChose) {
					this.addressData.provinceName = res.provice; //省
					this.addressData.cityName = res.city; //市
					this.addressData.townName = res.town; //区
					this.region = `${res.provice} ${res.city} ${res.town}`; //region为已选的省市区的值
				}
			},
			switchChange(e) {
				this.addressData.default = e.detail.value;

			},

			//地图选择地址
			chooseLocation() {
				// uni.chooseLocation({
				// 	geocode: true,
				// 	success: (data) => {
				// 		console.log(data)
				// 		this.addressData.addressName = data.address;
				// 		this.addressData.address = data.address;
				// 	}
				// })



			},

			//提交
			confirm() {

				if (!this.addressData.name) {
					this.$api.msg('请填写收货人姓名');
					return;
				}
				if (!/(^1[3|4|5|7|8][0-9]{9}$)/.test(this.addressData.mobile)) {
					this.$api.msg('请输入正确的手机号码');
					return;
				}
				if (!this.addressData.townName) {
					this.$api.msg('请选择省市区');
					return;
				}
				if (!this.addressData.area) {
					this.$api.msg('请填写地址详细信息');
					return;
				}

				if (this.manageType === 'edit') {
					uni.request({
						url: this.$serverUrl + '/app/address/modify',
						header: {
							"Content-Type": "application/json",
							"Authorization": this.token
						},
						data: {
							"AddId": this.addressData.AddId,
							"MemId": this.userInfo.MemId,
							"Name": this.addressData.name,
							"Mobile": this.addressData.mobile,
							"AddName": "公司",
							"AddArea": this.addressData.provinceName + this.addressData.cityName + this.addressData.townName,
							"Address": this.addressData.area,
							"Latitude": 111.1,
							"Longitude": 111.1,
							"DefaultAdd": this.addressData.default,
							"Country": "中国",
							"Province": this.addressData.provinceName,
							"City": this.addressData.cityName,
							"District": this.addressData.townName
						},
						method: "POST",
						success: (e) => {
							//this.$api.prePage()获取上一页实例，可直接调用上页所有数据和方法，在App.vue定义
							// this.$api.prePage().refreshList(data, this.manageType);
							this.$api.msg(`地址${this.manageType=='edit' ? '修改': '添加'}成功`);
							setTimeout(() => {
								uni.navigateBack()
							}, 800)
						},
						fail: (e) => {
							uni.showModal({
								content: "请求失败，请重试！",
								showCancel: false
							})
						},
						complete: () => {
							this.loading = false;
							this.logining = false;
						}
					})

				} else {

					uni.request({
						url: this.$serverUrl + '/app/address/add',
						header: {
							"Content-Type": "application/json",
							"Authorization": this.token
						},
						data: {
							"MemId": this.userInfo.MemId,
							"Name": this.addressData.name,
							"Mobile": this.addressData.mobile,
							"AddName": "公司",
							"AddArea": this.addressData.provinceName + this.addressData.cityName + this.addressData.townName,
							"Address": this.addressData.area,
							"Latitude": 111.1,
							"Longitude": 111.1,
							"DefaultAdd": this.addressData.default,
							"Country": "中国",
							"Province": this.addressData.provinceName,
							"City": this.addressData.cityName,
							"District": this.addressData.townName
						},
						method: "POST",
						success: (e) => {


							//this.$api.prePage()获取上一页实例，可直接调用上页所有数据和方法，在App.vue定义
							// this.$api.prePage().refreshList(data, this.manageType);
							this.$api.msg(`地址${this.manageType=='edit' ? '修改': '添加'}成功`);
							setTimeout(() => {
								uni.navigateBack()
							}, 800)

						},
						fail: (e) => {
							uni.showModal({
								content: "请求失败，请重试！",
								showCancel: false
							})
						},
						complete: () => {
							this.loading = false;
							this.logining = false;
						}
					})
				}


			},
			delect() {




				uni.request({
					url: this.$serverUrl + '/app/address/remove/' + this.addressData.AddId,
					header: {
						"Content-Type": "application/json",
						"Authorization": this.token
					},
					data: {},
					method: "POST",
					success: (e) => {
						setTimeout(() => {
							uni.navigateBack()
						}, 800)

					},
					fail: (e) => {
						uni.showModal({
							content: "请求失败，请重试！",
							showCancel: false
						})
					},
					complete: () => {
						this.loading = false;
						this.logining = false;
					}
				})









			}
		}
	}
</script>

<style lang="scss">
	page {
		background: $page-color-base;
		padding-top: 16upx;
	}

	.row {
		display: flex;
		align-items: center;
		position: relative;
		padding: 0 30upx;
		height: 110upx;
		background: #fff;

		.tit {
			flex-shrink: 0;
			width: 150upx;
			font-size: 30upx;
			color: $font-color-dark;
		}

		.input {
			flex: 1;
			font-size: 30upx;
			color: $font-color-dark;
		}

		.icon-shouhuodizhi {
			font-size: 36upx;
			color: $font-color-light;
		}
	}

	.default-row {
		margin-top: 16upx;

		.tit {
			flex: 1;
		}

		switch {
			transform: translateX(16upx) scale(.9);
		}
	}

	.add-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 690upx;
		height: 80upx;
		margin: 60upx auto;
		font-size: $font-lg;
		color: #fff;
		background-color: $base-color;
		border-radius: 10upx;
		box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
	}
</style>
